<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web socket</title>
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <style>
        #app {
            margin-top: 200px;
        }

        h1 {
            margin-bottom: 20px;
        }

        #contents {
            margin-top: 20px;
        }

        .cb {
            height: 40px;
            line-height: 40px;
        }

        #users {
            background-color: gainsboro;
            border-radius: 3px;
            padding: 15px;
            line-height: 25px;
            /*height: 30px;*/
        }

    </style>
</head>
<body>
    <div id="app">
        <Row>
            <i-col span="12" push="6">
                <h1>{{ sessionId }} 号用户你好.</h1>
            </i-col>
        </Row>
        <Row>
            <i-col span="12" push="6">
                <i-col span="10">
                    <i-input v-model="message" placeholder="请输入发送的内容..." />
                </i-col>
                <i-col span="2">
                    <i-button type="primary" style="margin-left: 25px" @click='send'>发送</i-button>
                </i-col>
            </i-col>
        </Row>
        <Row id="contents">
            <i-col span="8" push="6">
                <i-col span="15" id="messages">
                    <Message v-for="(item, index) of messages" :data="item"></Message>
                </i-col>
                <i-col span="5" offset="1">
                    <h3>其他人</h3>
                    <div id="users">
                        <Checkbox-Group v-model="toIds">
                            <div v-for="item in otherIds">
                                <Checkbox :label="item">{{ item }}</Checkbox>
                            </div>
                        </Checkbox-Group>
                    </div>
                </i-col>
            </i-col>
        </Row>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<script src="conponents/Message.js"></script>
<script>
    window.vm = new Vue({
        el: '#app',
        data() {
            return {
                message:null,
                messages:[],
                sessionId:'',
                otherIds:[],
                toIds:[]
            }
        },
        methods: {
            send : function () {
                this.socket.send(JSON.stringify({
                    content:this.message,
                    toIds: this.toIds
                }));
            }
        }
    });
</script>
<script>

    window.vm.socket = getWebSocket('ws://localhost:8080/socket', () => console.log('连接建立成功.'), event => {
        const msg = JSON.parse(event.data);
        vm.sessionId = msg.sessionId;
        vm.messages.push({ ...msg });
        vm.otherIds.length = 0;
        vm.otherIds.push(...msg.otherIds);
    });

    function getWebSocket(url, open, receive) {
        if( 'WebSocket' in window ){
            let webSocket = new WebSocket(url);
            webSocket.onclose = close;
            webSocket.onmessage = receive;
            window.addEventListener('onbeforeunload', close);

            if ( open ) {
                open();
            }

            function close() {
                webSocket.close();
            }

            return {
                webSocket,
                send(message) {
                    webSocket.send(message);
                }
            };
        }
    }
</script>